<template>
  <div>
    <div class="serverBillContainer">
      <el-row style="margin-top: 1px">
        <el-col :span="24"><div class="grid-content bg-purple">2. 根据服务类型划分的账单</div></el-col>
      </el-row>
      <el-table :data="serveBill" style="width: 100%">
        <el-table-column prop="id" label="顾客ID" >
        </el-table-column>
        <el-table-column prop="name" label="顾客名字">
        </el-table-column>
        <el-table-column prop="address" label="顾客地址">
        </el-table-column>
        <el-table-column prop="method" label="账户类型">
        </el-table-column>
        <el-table-column prop="amount" label="费用">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import * as requires from '../../network/require'

  export default {
    name: "Type",
    data() {
      return {
        serveBill: []
      }
    },
    created() {
      this.getServeBill();
    },
    methods: {
      getServeBill() {
        requires.getServeBill().then((res) => {
          this.serveBill = res.data;
        }).catch((err) => {
          console.log(err);
        })
      }
    }
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 8px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    padding-left: 30px;
    line-height: 36px;
    border-radius: 4px;
    min-height: 36px;
  }

  .simpleBillContainer, .serverBillContainer {
    margin-bottom: 200px;
  }
</style>
